<template>
    <div class="booksgit">
        <div class="tablist">
            <!-- 出版社 -->
            <div class="swiper-container presslist" style="border-bottom: 1px dotted white;">
                <ul class="tab swiper-wrapper">
                    <li class="swiper-slide">全部</li>
                    <li class="swiper-slide" v-for="(item,i) in presslist" :key="i">{{item}}</li>
                </ul>
            </div>

            <div class="hr"></div>

            <!-- 出版时间 -->
            <div class="swiper-container publicationDate" style="border-bottom: 1px dotted white;">
                <ul class="tab1 swiper-wrapper">
                    <li class="swiper-slide">全部</li>
                    <li class="swiper-slide" v-for="(item,i) in publicationDate" :key="i">{{item}}</li>
                </ul>
            </div>
        </div>
		<div class="show"></div>
    </div>
</template>

<script>
    // 导入swiper组件内容[周期函数内,第一第二阶段,如果是请求的数据进行轮播,建议再第三阶段执行]
    import Swiper from 'swiper'
    export default {
        name: 'MobileBooksGit',
        data() {
            return {
                presslist: ['机械出版社', '电子出版社', '二十一世纪出版社', '中国人口出版社', '人民出版社', '清华大学出版社', '工业大学出版社', '上海交通大学出版社', '北京出版社'],
                publicationDate: [],
                newslist: [],
                categoryMenus: []
            }
        },
		methods:{},
        //组件模板渲染完成后
        mounted() {
            //出版日期循环
            let maxYear = new Date().getFullYear()
            console.log(maxYear);
            for (let i = 2015; i <= maxYear; i++) {
                this.publicationDate.push(i);
                console.log(this.publicationDate);
            }

            // 出版社
            //调用轮播对象
            new Swiper('.presslist', {
                // 定义一次显示多少个轮播项之间的间距
                slidesPerView: 'auto',
                // 设置宽度自动显示的轮播项数量
                spaceBetween: 20
            });

            // 出版时间
            new Swiper('.publicationDate', {
                slidesPerView: 'auto',
                spaceBetween: 20
            })
            // 书籍类型
            new Swiper('.categoryMenus', {
                slidesPerView: 'auto',
                spaceBetween: 20
            })
        }
    }
</script>

<style scoped>
    .booksgit {
        width: 100%;
        background-color: #626e81;
    }

    .booksgit .tablist {
        margin: 0 auto 1rem;
        width: 90%;
        border-top: 1px dotted white;
        border-bottom: 1px dotted white;
    }

    .booksgit .tablist .tab {
        height: 2.5rem;
        line-height: 2.5rem;
    }

    .booksgit .tablist .tab li {
        color: white;
        /* padding: 0.5rem 1rem; */
        font-size: 0.875rem;
        /* float: left; */
        /* 不设置任何宽度包括零 */
        width: unset;
    }

    .booksgit .tablist .tab1 {
        height: 2.5rem;
        line-height: 2.5rem;
		color: white;
    }


    .booksgit .tablist .tab1 li {
        /* color: #715e3e; */
		color: white;
        /* padding: 0.5rem 1rem; */
        font-size: 0.875rem;
        /* float: left; */
        /* 不设置任何宽度包括零 */
        width: unset;
        margin-right: 1rem;
    }

    .homelist ul {
        width: 96%;
        margin: 0 auto 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .homelist ul li {
        width: 32%;
        margin-bottom: 0.5rem;
        position: relative;
    }

    .homelist ul li img {
        width: 100%;
    }

    .homelist ul li h3 {
        width: 100%;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.8rem;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        /* 去掉加粗 */
        font-weight: normal;
        /* 强制不换行 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /*         支持webkit内核的浏览器才会生效
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; */
    }
    
    
    .homelist ul li span {
        font-size: 0.7rem;
        background-color: #FFA500;
        position: absolute;
        top: 0;
        right: 0;
        color: white;
        padding: 0.3rem 0.1rem;
        /* 单独给某个角设置圆角 */
        border-radius: 0 0 0 0.6rem;
    }
</style>
